<template>
    <div class="personal-tabbar">
        <div class="personal-suggestion">
            <div class="personal-picture" @mousemove="handleHoverShow" @mouseleave="handleHoverHide">
                <img :src="store.state.userInfo.avatar" :alt="PersonalInfo.roleId" />
                <div class="img_hover" v-show="isHover" @click="changeWork"><span>点击更换头像</span></div>
            </div>
            <PersonalType class="personal-role" :role="PersonalInfo.roleId"></PersonalType>
        </div>
        <div class="personal-selectBar">
            <el-menu class="el-menu-demo" :route="true">
                <router-link v-for="item in filteredLoggedLi" :key="item.index" :to="item.path">
                    <el-menu-item>
                        <!-- currentPath == item.path 判断当前路由实现高亮效果 -->
                        <a class="personal-icon"><img :src="currentPath == item.path ? item.activeIcon : item.icon"></a>
                        <p :class="{ 'personal-active': currentPath == item.path }">{{ item.title }}</p>
                    </el-menu-item>
                </router-link>
            </el-menu>
        </div>
        <UpdateAvatar ref="updateAvatar"></UpdateAvatar>
    </div>
</template>

<script setup>
import UpdateAvatar from "./UploadWork/UpdateAvatar.vue";
import PersonalType from "@/components/PersonalType.vue"
import { reactive, ref, computed } from 'vue'
import store from '@/store'
import { useRouter } from "vue-router";
const userInfo = ref()
// 获取历史路径
const UseRouter = useRouter()

// hover的显示
const isHover = ref(false)

// 用户身份
const PersonalInfo = reactive({
    userId: '',
    avatar: '',
    roleId: '',
    nickName: ''
});
userInfo.value = store.state.userInfo;
PersonalInfo.avatar = userInfo.value.avatar;
PersonalInfo.roleId = userInfo.value.roleId;
PersonalInfo.userId = userInfo.value.userId;
PersonalInfo.nickName = userInfo.value.nickName;


const loggedLi = ref([

    {
        title: '个人资料',
        path: '/personal/center',
        icon: require('../../assets/icons/User.png'),
        activeIcon: require('../../assets/icons/User-active.png'),
        isShow: true
    },
    {
        title: '我的比赛',
        path: '/personal/race',
        icon: require('../../assets/icons/House.png'),
        activeIcon: require('../../assets/icons/House-active.png'),
        isShow: true
    },
    {
        title: '我的评审',
        path: '/personal/assess',
        icon: require('../../assets/icons/House.png'),
        activeIcon: require('../../assets/icons/House-active.png'),
        isShow: true
    },
    {
        title: '我的通知',
        path: '/personal/notice',
        icon: require('../../assets/icons/Notice.png'),
        activeIcon: require('../../assets/icons/Notice-active.png'),
        isShow: true
    },
    {
        title: '我的消息',
        path: '/personal/message',
        icon: require('../../assets/icons/Message.png'),
        activeIcon: require('../../assets/icons/Message-active.png'),
        isShow: true
    }
])

// 确定用户身份
const handleLoggedLi = (roleId) => {
    // console.log('handleLoggedLi.roleId:', roleId)
    switch (roleId) {
        case 0:
            break;
        case 1:
            loggedLi.value[2].isShow = false;
            break;
        case 2:
            loggedLi.value[1].isShow = false;
            break;
        case 3:
            loggedLi.value[1].isShow = false;
            loggedLi.value[2].isShow = false;
            loggedLi.value[3].isShow = false;
            break;
        default:
            break;
    }
}
// 辅助用户身份生成
if (PersonalInfo.roleId) {
    handleLoggedLi(PersonalInfo.roleId)
}

// 过滤掉不显示的元素
const filteredLoggedLi = computed(() => {
    return loggedLi.value.filter(item => item.isShow);
});

// 获取路由历史对象
const currentPath = computed(() => {
    return UseRouter.currentRoute.value.path

})

// 鼠标事件
const handleHoverShow = () => {
    return isHover.value = true
}
const handleHoverHide = () => {
    return isHover.value = false
}

const updateAvatar = ref(null);
const changeWork = () => {
    updateAvatar.value.openDialog()
}
</script>

<style scoped lang="scss">
.personal-tabbar {
    width: 230px;
    height: 700px;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 30px;

    .personal-suggestion {
        text-align: center;

        .personal-picture img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            // margin: 55px 67px 10px 65px;
        }
        .personal-picture {
            position: relative;
            padding: 55px 67px 10px 65px;
        }
        .img_hover {
            position: absolute;
            top: 55px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgba(60, 60, 60, 0.7);
            color: rgb(243, 241, 241);
            cursor: pointer;

            span {
                align-items: center;
                display: flex;
                font-weight: 400;
                justify-content: center;
                margin: 0 auto;
                text-align: center;
                width: 100%;
                height: 100%;
            }
        }

        .personal-role {
            width: 30%;
            height: 25px;
            border-radius: 7px;
            margin: 10px 0 0 78px;
            padding-top: 2px;

        }
    }

    .personal-selectBar {
        position: relative;
        margin-top: 50px;

        a {
            text-decoration: none;

        }

        .el-menu-demo {
            border: none;
            position: absolute;
            left: 20%;

            .el-menu-item {
                .personal-icon {
                    width: 50%;
                    height: 50%;
                    margin-right: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;


                    img {
                        width: 100%;
                        height: 100%;
                        fill: lightblue;
                        // transform: translateX(30px);
                        // filter: drop-shadow(#ff0000 -30px 0px 0px);
                    }
                }

                .personal-active {
                    color: var(--color-blue-2);
                }
            }
        }
    }
}
</style>